<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">订单价格下限</label>
        <el-input v-model="query.lowerLimit" clearable placeholder="订单价格下限" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <label class="el-form-item-label">订单价格上限</label>
        <el-input v-model="query.upperLimit" clearable placeholder="订单价格上限" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <rrOperation :crud="crud"/>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"/>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="540px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-form-item label="订单价格下限" prop="lowerLimit">
            <el-input v-model="form.lowerLimit" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="订单价格上限" prop="upperLimit">
            <el-input v-model="form.upperLimit" style="width: 370px;"/>
          </el-form-item>
          <el-form-item label="选择赠送的商品" prop="ycGiftGoodList">
            <el-button type="primary" @click="selectGoods">选择商品</el-button>
            <template>
              <el-table
                :data="tableData"
                style="width: 370px">
                <el-table-column
                  prop="name"
                  label="商品名称"
                  width="120px">
                </el-table-column>
                <el-table-column
                  prop="originalPrice"
                  label="原价"
                  width="120px">
                </el-table-column>
                <el-table-column
                  prop="number"
                  label="赠送数量"
                  width="120px">
                </el-table-column>
              </el-table>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="lowerLimit" label="订单价格下限"/>
        <el-table-column prop="upperLimit" label="订单价格上限"/>
        <el-table-column prop="ycGiftGoodList" label="赠送的商品">
          <template slot-scope="scope">
            <div v-for="item in scope.row.ycGiftGoodList">
              名称:{{item.name}}数量：{{item.count}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-permission="['admin','ycGiftGood:edit','ycGiftGood:del']" label="操作" width="150px"
                         align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
    <el-drawer
      :with-header="false"
      :visible.sync="goodsDrawer"
      size="50%">
      <div class="selectRawDrawer" style="padding-top: 20px">
        <div class="selectRawSearch">
          <el-input v-model="queryGoods.name" clearable placeholder="商品名" style="width: 200px;"/>
          <el-button type="primary" @click="getGoodslList">筛选</el-button>
        </div>
        <!-- 表格渲染 -->
        <el-table
          :data="goodsData"
          height="800"
          border
          class="goodsTable">
          <el-table-column prop="name" label="商品名称" width=""/>
          <el-table-column prop="originalPrice" label="价格" width=""/>
          <el-table-column prop="number" label="赠送数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" type="number" min="1"
                        placeholder="赠送数量">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click="addGoods(scope.$index, scope.row)"
                type="primary"
                plain
                size="small">
                选择商品
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import crudYcGiftGood from '@/api/market/ycGiftGood'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import { getGoodsList } from '../../../api/market/ycGiftGood'

  const defaultForm = { id: null, lowerLimit: null, upperLimit: null, ycGiftGoodList: null }
  export default {
    name: 'YcGiftGood',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({ title: '商品满赠', url: 'api/ycGiftGood', sort: 'id,desc', crudMethod: { ...crudYcGiftGood } })
    },
    data() {
      return {
        permission: {
          add: ['admin', 'ycGiftGood:add'],
          edit: ['admin', 'ycGiftGood:edit'],
          del: ['admin', 'ycGiftGood:del']
        },
        rules: {
          lowerLimit: [
            { required: true, message: '订单价格下限不能为空', trigger: 'blur' }
          ],
          upperLimit: [
            { required: true, message: '订单价格上限不能为空', trigger: 'blur' }
          ],
          ycGiftGoodList: [
            { required: true, message: '赠送的商品不能为空', trigger: 'blur' }
          ]
        },
        queryTypeOptions: [
          { key: 'lowerLimit', display_name: '订单价格下限' },
          { key: 'upperLimit', display_name: '订单价格上限' }
        ],
        tableData: [],
        goodsData: [],
        //
        goodsDrawer: false,
        //
        queryGoods: {
          name: ''
        }
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        this.crud.optShow = {
          add: true,
          edit: false,
          del: true,
          download: false
        }
        return true
      },
      //
      /*[CRUD.HOOK.afterToAdd]() {
        let data = [];
        _t.tableData.forEach(function(items,index){
          data[index]['skuId'] = items.id;
          data[index]['count'] = items.number;
        });
        this.form.goodIds = data;
        return true
      },*/
      //选择商品
      selectGoods() {
        let _t = this
        _t.goodsDrawer = true
        _t.getGoodslList()
      },
      //筛选
      getGoodslList() {
        let _t = this
        crudYcGiftGood.getGoodsList().then(res => {
          _t.goodsData = res.content
          console.log('getGoodsBrand')
          console.log(res)
        })
      },
      //选择商品
      addGoods(index, row) {
        let status = true;
        let _t = this
        if (_t.tableData.length>0){
          _t.tableData.forEach(function(items,index){
            console.log(items.id)
            console.log(row.id)
            if (items.id === row.id){
              _t.$message.error('赠品信息已更改！');
              _t.tableData.splice(index,1);
              _t.tableData.push(row);
              status = false;
              return false;
            }
          });
          console.log("status===========")
          console.log(status)
          if (status){
            _t.$message.error('新增赠品成功！');
            _t.tableData.push(row);
          }
        }else {
          _t.$message.error('新增赠品成功！');
          _t.tableData.push(row);
        }
        console.log("tableData===========")
        console.log(_t.tableData)
        let data = [];
        _t.tableData.forEach(function(items,index){
          data[index] = {
            skuId:items.id,
            count:items.number,
          }
        });
        this.form.ycGiftGoodList = data;
        console.log("form===========")
        console.log(this.form.ycGiftGoodList)
        console.log(this.form)
      }
    }
  }
</script>

<style scoped>
  .selectRawDrawer {
    margin: 10px 20px;
  }

  .selectRawSearch {
    padding: 10px 0;
  }

  .goodsTable {
    width: 100%;
  }
</style>
